import React, {
  Component,
  useState,
  useEffect,
} from "react";
import {
  View,
  Text,
  FlatList,
  Image
} from "react-native";
import Content from "../../components/content/content";
import styles from "./now-rank-sheet";
import RankCell from '../../components/rank-cell/rank-cell';
import RankFooter from '../../components/rank-footer/rank-footer';
import FooterLoading from '../../components/footer-loading/footer-loading';

import * as api from "../../api";
import * as config from "../../config";


export default function NowRank(props) {
  const [myRank, setMyRank] = useState('');
  const [myMoney, setMyMoney] = useState(0);
  const [data, setData] = useState([]);
  const [refresh, setRefresh] = useState(false);
  const [page, setPage] = useState(1);
  const [allPage, setAllPage] = useState(1);
  const [showEmpty, setShowEmpty] = useState(false);
  const [footerText, setFooterText] = useState(false);
  const type = props.type;

  const getRanks = (data = []) => {
    setRefresh(true);
    api.getRanks({
      page,
      page_size: config.PAGE_SIZE,
      month: type,
    }).then(res => {
      const allPage = Math.ceil(res.pagination.count / config.PAGE_SIZE);
      const result = [...data, ...res.ranking];
      if (res.your_ranking) {
        setMyRank(res.your_ranking.ranking);
        setMyMoney(res.your_ranking.income);
      }
      setData(result);
      setAllPage(allPage);
      setEmptyComponent(result);
      setFooter(allPage);
    }).catch(rej => {
      global.showToast(rej);
      setEmptyComponent(true);
    }).finally(() => {
      setRefresh(false);
    });
  }

  useEffect(() => {
    if (page === 0) {
      return;
    }
    if (page === 1) {
      getRanks();
    } else {
      getRanks(data);
    }
  }, [page]);

  renderData = ({
    item,
    index,
  }) => {
    const {
      uid,
      income,
      task_num,
      username,
      ranking_num,
    } = item;
    return <RankCell key={uid} rank={ranking_num} name={username} task={task_num} money={income} />
  }

  setEmptyComponent = (result) => {
    setShowEmpty(result.length > 0 ? false : true);
  };

  setFooter = (result) => {
    setFooterText(page >= result);
  };

  onEndReached = (e) => {
    if (data.length < config.PAGE_SIZE) {
      return;
    }

    if (page >= allPage) {
      return;
    }
    setPage(page + 1);
  }

  onRefresh = () => {
    setPage(0);
    setTimeout(() => {
      setPage(1);
    });
  }

  footer = () => {
    if (page <= 1) {
      return;
    }
    return <FooterLoading showLoading={footerText} />
  };

  Empty = () => {
    return (
      showEmpty ? <Text style={{textAlign: "center",marginTop:50}}>暂无数据</Text> : null
    );
  };

  return (
    <Content>
      <FlatList 
        style={styles.content}
        data={data}
        refreshing={refresh}
        onRefresh={this.onRefresh}
        renderItem={this.renderData}
        onEndReachedThreshold={.3}
        onEndReached={this.onEndReached}
        scrollEventThrottle={500}
        ListEmptyComponent={this.Empty()}
        ListFooterComponent={this.footer()}
        keyExtractor={(item,index)=>index.toString()}
        progressViewOffset={20}
        getItemLayout={(data, index) => (
          {length: 50, offset: 50 * index, index}
        )}
      />
      <View style={styles.footer}>
        <RankFooter rank={myRank} money={myMoney} />
      </View>
		</Content>
  )
}